<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="<%=request.getContextPath()%>/css3Signin/css/style.css">
  <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css3Signin/css/reset.css"/>
  <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js" ></script>
  <!-- layer -->
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/js/layer/skin/layer.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/layer/layer.js" ></script>
  
<script type="text/javascript">
if(window != top){
	//session 失效 判断有没父页面，有，改变父页面地址
	top.location.href = location.href; 
}  
	

$(function(){
	
	$(".index_top_div").focus();
	
	$("#name").on("focus", function(){
		
		if($(this).attr("class") == "text_first"){
			
			$(this).removeClass("text_first");
			$(this).val("");
		}
		
	});
	
	$("#password").on("focus", function(){
		
		if($(this).attr("class") == "text_first"){
			
			$(this).parent().html("<input type='password' id='password' name='password' />");
			//$("#password").focus();
			document.getElementById("password").focus();
			//$(this).removeClass("text_first");
			//$(this).val("");
		}
		
	});
});

function login(){

	if($("#param .text_first").length > 0){
		return false;
	}
	
	// 准备参数
	var param = new Object();
	param.userName = $.trim($("#name").val());
	param.password = $.trim($("#password").val());
	param.role=$.trim($("#role").val());
	if(param.userId == ""){

		layer.alert('用户名不可为空', {icon: 0});
		return false;
	}else if(param.password == ""){

		layer.alert('密码不可为空', {icon: 0});
		return false;
	}

	$.ajax({
		type:"POST",
		async:true,  //默认true,异步
		data:param,
		dataType:'text',
		url:"<%=request.getContextPath()%>/login/tologin.action",
		success:function(data){
			
			if(data == "OK"){
				window.location.href = "<%=request.getContextPath()%>/index/toIndexPage.action";
			}else if(data == "PASSWORD_ERROR"){

				layer.alert('密码错误', {icon: 2});
			}else if(data == "NO_EXIST"){

				layer.alert('用户不存在！', {icon: 2});
			}else{

				layer.alert('登陆失败！', {icon: 2});
			}
			
	    }
	});
}

function key_down(num){
	if(num == 13) {
		login();
	}
}
</script>

</head>
<body onkeydown="key_down(event.keyCode);">

<div id="particles-js">
		<div class="login">
			<div class="login-top">
				门禁管理系统
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="<%=request.getContextPath()%>/css3Signin/img/name.png"/></div>
				<div class="login-center-input">
					<input type="text" name="name"  id="name" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
					<div class="login-center-input-text">用户名</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="<%=request.getContextPath()%>/css3Signin/img/password.png"/></div>
				<div class="login-center-input">
					<input type="password" id="password" name="password" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
					<div class="login-center-input-text">密码</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="<%=request.getContextPath()%>/css3Signin/img/user_01.png"/></div>
				<div class="login-center-input">
					<select  id="role" name="role" >
						<option value="3">系统管理员</option>
						<option value="4">部门经理</option>
						<option value="5">班主任</option>
						<option value="6">咨询师</option>
						<option value="7">就业老师</option>
						<option value="8">任课老师</option>
						<option value="9">学员</option>
					</select>
					<div class="login-center-input-text">角色</div>
				</div>
			</div>
			
			<div class="login-button">
				登陆
			</div>
		</div>
		<div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="<%=request.getContextPath()%>/css3Signin/js/particles.min.js"></script>
<script src="<%=request.getContextPath()%>/css3Signin/js/app.js"></script>
<script type="text/javascript">
	function hasClass(elem, cls) {
	  cls = cls || '';
	  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
	  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
	}
	 
	function addClass(ele, cls) {
	  if (!hasClass(ele, cls)) {
	    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
	  }
	}
	 
	function removeClass(ele, cls) {
	  if (hasClass(ele, cls)) {
	    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
	    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
	      newClass = newClass.replace(' ' + cls + ' ', ' ');
	    }
	    ele.className = newClass.replace(/^\s+|\s+$/g, '');
	  }
	}
		document.querySelector(".login-button").onclick = function(){
				addClass(document.querySelector(".login"), "active");
				setTimeout(function(){
					addClass(document.querySelector(".sk-rotating-plane"), "active");
					document.querySelector(".login").style.display = "none";
					login();
				},800)
				setTimeout(function(){
					removeClass(document.querySelector(".login"), "active");
					removeClass(document.querySelector(".sk-rotating-plane"), "active");
					document.querySelector(".login").style.display = "block";
					
					
				},2000)
		}
</script>
</body>
</html>